<template>
	<div class="login">
		<div class="head clearfloat">
			<div class="headimg">
				<span class="viewsiconfont"></span>
			</div>
			<div class="headlogin">
				<button @click="login">登录</button>
				<button>注册</button>
			</div>
			<div class="me">
				<span class="viewsiconfont"></span>
			</div>
		</div>
	</div>
</template>

<script>
	//import axios from 'axios'
	// 引入路由函数
	import {useRouter} from 'vue-router'
	export default {
		name:'Login',
		components:{
			
		},
		setup(){
			//创建路由
			const router = useRouter()
			function login(){
				//console.log(router)
				router.push('/loginview')
			}
			return {
				login
			}
		}
	}
</script>

<style scoped>
	.head{
		height: 100px;
		background-color: #42B983;
	}
	
	.headimg {
		float: left;
		margin: 10px;
		background-color: #ffffff;
		border-radius: 50%;
	}
	.headimg .viewsiconfont {
		font-size: 50px;
		padding: 5px;
	}
	.headlogin {
		float: left;
		margin: 35px 10px;

	}
	/* 权重为 10+1+10 */
	.headlogin button:first-child {
		color: #000000;
		background-color: #FF0000;
	}
	
	.headlogin button:last-child {
		margin-left: 10px;
		color: #000000;
		background-color: #FF0000;
	}
	
	.me {
		float: right;
		margin:35px 10px;
		
	}

	.me .viewsiconfont {
		color: #ffffff;
	}
</style>
